<template>
  <formItem :label="label" @click.native="handleShowPop">
    <div class="form-select">
      <span class="form-text" v-show="text != ''">{{ text }}</span>
      <span class="form-text-placeholder" v-show="text == ''">请选择</span>
      <span class="font_family icon-gengduo form-arrow"></span>
    </div>
    <van-popup position="bottom" get-container="body" v-model="showPop">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="showPop = false"
        @confirm="confirmDate"
        />
    </van-popup>
  </formItem>
</template>
<script>
import formItem from '@/components/form-item'

export default {
  components: {
    formItem
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPop: false,
      text: this.value,
      currentDate: new Date()
    }
  },
  watch: {
    value(newVal) {
      this.text = newVal
    },
    text(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    handleShowPop() {
      if (this.text != '') {
        this.currentDate = new Date(this.text.replace('-', '/'))
      } else {
        this.currentDate = new Date()
      }
      this.showPop = true
    },
    confirmDate(date) {
      const year = date.getFullYear()
      const month = this.toTen(date.getMonth() + 1)
      const day = this.toTen(date.getDate())
      this.text = `${year}-${month}-${day}`
      this.showPop = false
    },
    toTen(value) {
      if (value < 10) {
        return '0' + value
      } else {
        return value
      }
    }
  },
  mounted() {
    this.text = this.value
  }
}
</script>
<style lang="less" scoped>
.form-select {
  text-align: right;
  line-height: 36px;
}
.form-text-placeholder {
  font-size: 14px;
  color: #011445;
  opacity: 0.6;
}
.form-text {
  font-size: 14px;
  color: #011445;
}
.form-arrow {
  display: inline-block;
  font-weight: normal;
  transform: rotate(90deg);
  margin-left: 10px;
}
</style>